<template>
  <el-dialog
    v-model="visible"
    title="入库异常数据"
    width="1160"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clickClose"
  >
    <div class="procure-error">
      <!-- 异常数据表格 -->
      <el-table class="jzt-table" :data="list" stripe border style="width: 100%; max-height: 500px; overflow-y: auto">
        <el-table-column fixed prop="date" show-overflow-tooltip label="商品信息" width="405">
          <template #default="scope">
            <div class="info">
              <div class="left">
                <img :src="scope.row.mainPicUrl" alt="" />
              </div>
              <div class="right">
                <h3 class="name">{{ scope.row.productName || "-" }}</h3>
                <p style="white-space: break-spaces">
                  <!-- {{ getSpes(scope.row.skuProperties) }} -->
                  {{ scope.row.skuSpecification }}
                </p>
                <p>SKU编码：{{ scope.row.skuCode || "-" }}</p>
                <p>ID:{{ scope.row.productId || "-" }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryQuantity" show-overflow-tooltip label="数量" />
        <el-table-column prop="deliveryPartQuantity" show-overflow-tooltip label="预计入库件数" width="120" />
        <el-table-column prop="productUnit" show-overflow-tooltip label="单位">
          <template #default="scope">
            {{ getName(scope.row.productUnit) || "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="inventoryQuantity" show-overflow-tooltip label="实际入库数量" width="120" />
        <el-table-column prop="inventoryPartQuantity" show-overflow-tooltip label="实际入库件数" width="120" />
        <el-table-column prop="address" show-overflow-tooltip label="剩余入库数量" width="120">
          <template #default="scope">
            <!-- 预计数量-实际数量 -->
            <p style="color: #ff3333">{{ scope.row.deliveryQuantity - scope.row.inventoryQuantity }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" show-overflow-tooltip label="剩余入库件数" width="120">
          <template #default="scope">
            <!-- 预计件数-实际件数 -->
            <p style="color: #ff3333">{{ scope.row.deliveryPartQuantity - scope.row.inventoryPartQuantity }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="exceptionType" show-overflow-tooltip label="异常处理" width="120">
          <template #default="scope">
            <el-select v-model="scope.row.exceptionType" placeholder="请选择">
              <el-option label="漏发待补发" :value="1" />
              <el-option label="改版" :value="2" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="exceptionCause" show-overflow-tooltip label="异常处理备注" width="120">
          <template #default="scope">
            <el-input type="textarea" :rows="2" maxlength="20" v-model="scope.row.exceptionCause"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="200">
          <template #default="scope">
            <RemarkEditor v-model="scope.row.remark" :isEdit="false" />
          </template>
          <!-- <template #default="scope">{{ scope.row.remark }}</template> -->
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" plain @click="clickClose">取消</el-button>
        <el-button type="primary" @click="submit">保存修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { inboundOrderDetail, abnormalHandle } from "@/apis/procure/entry";
import useCodeArrStore from "@/store/modules/select";
import RemarkEditor from "@/components/RemarkEditor";

const visible = ref(false);
const list = ref([]);
const detail = ref({});

const emit = defineEmits(["close", "submit"]);
const props = defineProps({
  optionInfo: {
    type: Object,
    default: () => {
      return {
        isShow: false,
        inboundId: ""
      };
    }
  }
});
watch(
  () => props.optionInfo.isShow,
  async val => {
    visible.value = val;
  },
  { deep: true }
);
watch(
  () => props.optionInfo.inboundId,
  async val => {
    getList(val);
  },
  { deep: true }
);
onMounted(() => {});

const getName = code => {
  return useCodeArrStore().getDictName("shop_unit", code);
};

//确认异常处理
const submit = () => {
  const flag = list.value.some(item => {
    if (!item.exceptionType) {
      ElMessage({
        message: "请选择每条数据的“异常处理”类型",
        type: "error"
      });
      return true;
    }
  });

  if (!flag) {
    abnormalHandle({
      inboundId: detail.value.inboundId,
      abnormalReqList: [...list.value]
    }).then(res => {
      if (res.code === 200) {
        ElMessage({
          message: "异常处理成功！",
          type: "success"
        });
        emit("submit");
      }
    });
  }
};

//查询详情数据
const getList = inboundId => {
  inboundOrderDetail({ inboundId: inboundId, filterOk: true }).then(async res => {
    if (res.code === 200) {
      detail.value = res.data;
      list.value = res.data.orderGoodsInfoList;
    }
  });
};

//拼接商品的sku规格
const getSpes = properties => {
  if (!properties) return "-";
  const arr = JSON.parse(properties) || [];
  if (arr.length > 1) {
    const str = arr.reduce((a, b) => {
      return a.specificationVal + "+" + b.specificationVal;
    });
    return str;
  } else if (arr.length === 1) {
    return arr[0].specificationVal;
  } else {
    return "-";
  }
};

const clickClose = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  .left {
    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }
  .right {
    padding-left: 18px;
    .name {
      font-size: 14px;
      color: #3d3d3d;
      margin-bottom: 5px;
    }
    p {
      font-size: 12px;
      color: #86909c;
      margin-bottom: 5px;
    }
  }
}
</style>
